<template>
    <div :class="type === 'Default'?'default':type === 'primary'?'primary':type === 'danger'?'danger':'default'"
         class="cgs-btn no-select"
         @click="$emit('click', $event)"
    >
        <slot></slot>
    </div>
</template>

<script>
    export default {
        name: "CgsButton",
        props:{
            type: {
                type: String,
                default: 'Default'
            }
        }
    }
</script>

<style scoped>
    .cgs-btn{
        width: 100px;
        height: 40px;
        color:#fff;
        text-align: center;
        line-height:40px;
        cursor: pointer;
        margin-left: 10px;
    }
    .default{
        background: #4C84FF;
    }
    .default:hover {
        background: #89abfa;
    }

    .warn{
        background: yellow;
    }
    .warn:hover {
        background: #f3f38e;
    }

    .danger{
        background: red;
    }
    .danger:hover {
        background: #f36969;
    }
</style>
